尤雨溪为什么要推出Vapor Mode

2023-06-11 17:33| 来源: 网络整理| 查看: 265

文章首发公众号：萌萌哒草头将军

演示源码和在线演示地址，公众号回复”演示“获得

🚀Svelte原理和进阶看这篇就够了🚀

学不完的框架，🐔啄不完的米，SolidJS，你到底爱谁？😘

🎉SolidJS响应式原理和简易实现🎉

Vapor Mode是尤雨溪在2022 Year In Review给定相中提出的概念，本篇文章我们将直观感受下尤雨溪为啥要推出Vapor Mode。

🎉前端开发书籍推荐

💎前情提要

在前面两篇文章中反复提到了不同框架编译之后的差异

🚀 React编译之后是Jsx函数返回的虚拟DOM

🚀 Vue编译之后是render函数返回的虚拟DOM

🚀 SolidJS编译之后返回的真实DOM字符串

🚀 Svelte编译之后返回的是真实DOM片段

React由于架构机制决定了每当状态发生改变，从当前组件开始一直到叶子组件重新加载。

Vue由于给每个组件建立了watchEffect监听机制，每当组件依赖的状态发生改变，当前组件重新加载。

SolidJS和Svelte由于在编译之后就确定了当状态发生改变UI随之变化的关系，所以仅仅是具体DOM的重新加载。

根据这些不同的更新粗细粒度，他们被分为

粒度成员粗粒度React中粒度Vue细粒度SolidJS，Svelte 💎直观感受

为了直观感受更新时的区别，现在我们设计如下关系的组件：

GrandFather ｜ Father | Child

每个组件的背景色都是随机的，并且在Father组件中，实现了一个Count功能。

我们用四个框架分别实现。下面只给出一个例子。

生成随机颜色：

`#${(~~(Math.random()*(1 setCount(count => count ++) return ( { height: 100, width: `40vw`, background: `#${(~~(Math.random() * (1

【本文地址】

公司简介

联系我们